<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.top {
				height: 50px;
				background-color: #FF608E;
				line-height: 50px;
				color: white;
				padding: 0px 5px;
				text-align: center;
			}
			
			.topback {
				font-size: 14px;
				float: left;
			}
			
			.bianji2 {
				font-size: 14px;
				float: right;
			}
			
			#myfoot a {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			#myfoot span:first-of-type {
				font-size: 16px;
			}
			
			.main {
				margin: 20px;
				font-size: 14px;
			}
			
			.maindiv {
				display: -webkit-box;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #F1F1F1;
			}
			
			.maindiv div:first-of-type {
				width: 100px;
			}
			
			.maindiv div:last-of-type {
				-webkit-box-flex: 1;
				text-align: center;
			}
			
			.maindiv:last-of-type {
				border-top: 5px solid #F1F1F1;
			}
			
			.bianji {
				position: absolute;
				top: 0px;
				left: -100%;
				width: 100%;
				background-color: white;
			}
			
			.top2 {
				/*height: 50px;*/
				background-color: #FF608E;
				text-align: center;
				line-height: 50px;
				padding: 0px 5px;
				color: white;
			}
			
			.top2 span:first-of-type {
				float: left;
				font-size: 14px;
			}
			
			.top2 span:last-of-type {
				float: right;
				font-size: 14px;
			}
			
			.bianjimain {
				margin: 20px;
				border: 1px solid #FF608E;
				border-radius: 15px;
				padding: 10px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			
			.main2 {
				display: -webkit-box;
				-webkit-box-align: center;
				margin-bottom: 10px;
				height: 50px;
				border-bottom: 1px solid #C0BFC4;
			}
			
			.main2>div:first-of-type {
				width: 80px;
				text-align: center;
				font-size: 14px;
				border-right: 1px solid #FF608E;
			}
			
			.main2>div:last-of-type {
				margin-left: 10px;
				-webkit-box-flex: 1;
				line-height: 50px;
			}
			
			.main2 input[type=text] {
				width: 100%;
				-webkit-box-flex: 1;
				border: 0px;
				outline: none;
				line-height: 20px;
				font-size: 14px;
				color: #999999;
			}
			
			.xingbie {
				display: -webkit-box;
			}
			
			.xingbie div {
				display: -webkit-box;
				-webkit-box-flex: 1;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.xingbie span {
				display: inline-block;
				height: 30px;
				width: 50px;
				text-align: center;
				border-radius: 10px;
				font-size: 14px;
				line-height: 30px;
				border: 1px solid #C0C0C0;
			}
			
			.xingbie div:first-of-type span.on {
				background-color: #007AFF;
				color: white;
				border-color: #007AFF;
			}
			
			.xingbie div:last-of-type span.on {
				background-color: #FF608E;
				color: white;
				border-color: #FF608E;
			}
			.maxbig {
				/*width: 100%;*/
				/*height: 100%;*/
				/*position: relative;*/
				max-width: 640px;
				overflow: hidden;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<div class="maxbig">

			<div class="bianji">
				<div class="top2">
					<span class="top2back" @click="topback">返回</span>
					<span>编辑资料</span>
					<span class="top2ok" @click="okback">完成</span>
				</div>
				<div class="bianjimain">
					<div class="main2">
						<div>
							姓名
						</div>
						<div>
							<input type="text" v-model="newname" />
						</div>
					</div>
					<div class="main2">
						<div>
							性别
						</div>
						<div class="xingbie">
							<div ><span class="on">男</span></div>
							<div ><span>女</span></div>
						</div>
					</div>
					<div class="main2">
						<div>
							联系方式
						</div>
						<div>
							<input type="text" v-model="newphone" />
						</div>
					</div>
				</div>
			</div>
			<!--我的资料-->
			<div class="big">
				<!--头部信息-->
				<div class="top" data-am-sticky>
					<span @click="back" class="topback Hui-iconfont Hui-iconfont-slider-left"></span>
					<span>我的资料</span>
					<span class="bianji2" @click="bianji">编辑</span>
				</div>
				<div class="main">
					<div class="maindiv">
						<div>
							姓名
						</div>
						<div v-html="info.attributes.name">
							周大生
						</div>
					</div>
					<div class="maindiv">
						<div>
							性别
						</div>
						<div v-html="info.attributes.sex">
							男
						</div>
					</div>
					<div class="maindiv">
						<div>
							手机
						</div>
						<div v-html="info.attributes.telephone">
							123-3213-2131
						</div>
					</div>
					<div class="maindiv">
						<div>
							我的余额
							<span class="Hui-iconfont Hui-iconfont-jifen">
								
							</span>
						</div>
						<div>
							￥1498.00
						</div>
					</div>
				</div>
				<!--脚步导航-->
				<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="myfoot">
					<ul class="am-navbar-nav am-cf am-avg-sm-4">
						<li>
							<a href="../index.html">
								<span class="Hui-iconfont  Hui-iconfont-home"></span>
								<span class="am-navbar-label">主页</span>
							</a>
						</li>
						<li>
							<a href="../page2/page2.html">
								<span class="Hui-iconfont Hui-iconfont-moban-2"></span>
								<span class="am-navbar-label">详情</span>
							</a>
						</li>
						<li>
							<a href="../page3/page3.html">
								<span class="Hui-iconfont Hui-iconfont-comment"></span>
								<span class="am-navbar-label">信息</span>
							</a>
						</li>
						<li>
							<a href="../page4/page4.html">
								<span class="Hui-iconfont Hui-iconfont-avatar"></span>
								<span class="am-navbar-label">个人中心</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/myvueb.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//男女
			$(".xingbie span").click(function() {
				$(".xingbie span").removeClass("on");
				$(this).addClass("on");
				myVue.sex=$(this).html();
			})
		</script>
	</body>

</html>